<template>
<div class="ecb">
  <section id="ecb_carousel" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#ecb_carousel" data-slide-to="0" class="active"></li>
			<li data-target="#ecb_carousel" data-slide-to="1"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active" data-interval="4000" >
				<img src="../../assets/images/ca1.jpg"  class="d-block w-100" alt="...">
			</div>
			<div class="carousel-item" data-interval="4000">
				<img src="../../assets/images/ca2.jpg"  class="d-block w-100" alt="...">
			</div>
		</div>
		<a class="carousel-control-prev" href="#ecb_carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#ecb_carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</section>
  <section id="ecb_recommend">
		<h2 class="text-center">促销活动</h2>
		<div class="" style="margin:0 150px">
			<div class="row">
				<!--左半部分-->
				<div id="recommend_r0" class="col-lg-6 col-md-12">
					<a href="#nogo" id="JS_imgWrap">
						<img style="height:250px;width:570px;" src="../../assets/images/re/re11.jpg" alt=""/>
					</a>
					
				</div>
				<div id="recommend_r1" class="col-lg-3 col-md-6" >
					<a href=""><img style="height:250px" src="../../assets/images/re/wh-1000xm4.jpg"/></a>
				</div>
				<div id="recommend_r2" class="col-lg-3 col-md-6">
					<a href=""><img style="height:250px" src="../../assets/images/re/wi-1000xm2.jpg"/></a>
				</div>
			</div>
		</div>
	</section>
  <section id="ecb_product">
		<h2 class="text-center">热销商品</h2>
		<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">手机</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">耳机</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">电视机</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
	   <el-row :gutter="20" >
          <div class="na" v-for="(g,index) in goodsList1.slice(0, 4)"  :key="index">
            <div class="thumbnail" >
              <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">
                <img :src="imagesURL + g.picture" width="180" height="180" style="margin-left:-20px" alt />
              </router-link>
              <div class="caption">
                <h5>
                  <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">{{ g.name }}</router-link>
                </h5>
                <p>
                  热销指数：
                  {{ g.star }}⭐
                </p>
                <p>上架日期：{{ g.pubdate }}</p>
                <p style="color:orange">价格：{{ g.price }} 元</p>
              </div>
            </div>
          </div>
        </el-row>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
	 
        <el-row :gutter="20" >
          <div class="na" v-for="(g,index) in goodsList2.slice(0, 4)"  :key="index">
            <div class="thumbnail" >
              <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">
                <img :src="imagesURL + g.picture" width="180" height="180" style="margin-left:-20px" alt />
              </router-link>
              <div class="caption">
                <h5>
                  <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">{{ g.name }}</router-link>
                </h5>
                <p>
                  热销指数：
                  {{ g.star }}⭐
                </p>
                <p>上架日期：{{ g.pubdate }}</p>
                <p style="color:orange">价格：{{ g.price }} 元</p>
              </div>
            </div>
          </div>
        </el-row>

  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
	   <el-row :gutter="20" >
          <div class="na" v-for="(g,index) in goodsList3.slice(0, 4)"  :key="index">
            <div class="thumbnail" >
              <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">
                <img :src="imagesURL + g.picture" width="180" height="180" style="margin-left:-20px" alt />
              </router-link>
              <div class="caption">
                <h5>
                  <router-link :to="{ path: '/goodsDetail', query: { id: g.id } }">{{ g.name }}</router-link>
                </h5>
                <p>
                  热销指数：
                  {{ g.star }}⭐
                </p>
                <p>上架日期：{{ g.pubdate }}</p>
                <p style="color:orange">价格：{{ g.price }} 元</p>
              </div>
            </div>
          </div>
        </el-row>
  </div>
</div>
	</section>
   
	<section id="ecb_about">
		<!--标题-->
		<div class="text-center mt-5 mb-3">
			<h2>关于我们</h2>
			<!--            <img src="" alt="">-->
		</div>
		<!--内容-->
		<div class="container" >
			<div class="row">
				<div class="col-lg-8 order-2 order-lg-1">
					<p class="text-muted">
						我们为何而存在？
					</p>
					<p class="text-muted">
						有时，我们让您欢笑。有时，我们让您流泪。我们让您感到鼓舞，兴奋，惊奇，充满活力。
					</p>
					<p class="text-muted">
						好奇心推动索尼不断向前，跨时代的电子产品。无与伦比的娱乐内容，创新的服务。
					</p>
					<p class="text-muted">
						我们以历史为荣，我们创造未来。我们珍视多种多样的观点。我们利用技术来改变并丰富生活。我们以可持续发展的愿景贡献世界。
					</p>
					<p class="text-muted">
						我们是索尼。索尼的企业宗旨：用创意和科技的力量感动世界。
					</p>
				</div>
				<div class="col-lg-4 order-1 order-lg-1 mb-3 mb-lg-0">
					<img src="../../assets/images/about/about.png" class="img-fluid img-thumbnail" alt="">
				</div>
			</div>
		</div>
	</section>
</div>
  
</template>
<script>
import { reactive, toRefs,} from 'vue'
import axios from 'axios';
export default {
	setup(){
		const state = reactive({
      goodsList1: [],
	  goodsList2: [],
	  goodsList3: [],
    });
	const imagesURL = import.meta.env.VITE_APP_URL + "/images/";

		axios({
    url: '/getGoodsListByTn',
    method: 'get',
    params: {
      tn: '手机'
    },
  }).then(res => {
    state.goodsList1 = res.data.data
  });
		axios({
    url: '/getGoodsListByTn',
    method: 'get',
    params: {
      tn: '耳机'
    },
  }).then(res => {
    state.goodsList2 = res.data.data
  });

  axios({
    url: '/getGoodsListByTn',
    method: 'get',
    params: {
      tn: '电视机'
    },
  }).then(res => {
    state.goodsList3 = res.data.data
  });

  return{
	  ...toRefs(state),
	  imagesURL,
  }

	},
    data(){
      return{


      }
     
    },
  methods: {
    off(){
      sessionStorage.clear();
      this.$router.push("/login");
    }
  },
}
</script>
<style>
.ecb{
  background-color: rgb(250, 250, 250);
}
.home1{
  margin: auto;
}
  .na{
    
    width: 260px;
	padding: 10px 30px;
    height: 400px;
    /* border: 1px solid blue; */
	background-color: rgb(255, 255, 255);
    float: left;
    margin: 30px;
  }
  
  .text-center{
    margin:20px 18% 20px 0;

  }
  #ecb_product{
    padding:0 120px;
    font-size: 16px;
    
  }
  #ecb_about{
	  margin-top: 150px;
    clear: both;
  }
  #recommend_r1 img:hover{
    transform:scale(1.05,1.05);
}
#recommend_r2 img:hover{
    transform:scale(1.05,1.05);
}
#recommend_r0 img:hover{
    transform:scale(1.05,1.05);
}
.na:hover{
    transform:scale(1.05,1.05);
}
</style>
